<script lang="ts" setup>
import { addBuilding, delBuilding, editBuilding, getBuilding, getBuildingDetail } from "@/api/park";
import type { BuilderParams, BuilderRow, newBuilderParams } from "@/types/park";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { onMounted, ref } from "vue";

const Params = ref<BuilderParams>({
  page: 1,
  pageSize: 10,
  name: "",
});
const BuilderList = ref<BuilderRow[]>([]);
const total = ref(0);
const getList = async () => {
  // 请求数据
  const res = await getBuilding(Params.value);
  if (res.code === 10000) {
    BuilderList.value = res.data.rows;
    total.value = res.data.total;
  }
};
onMounted(() => {
  getList();
});
// 新增楼宇弹窗
const dialogVisible = ref(false);
const newParams = ref<newBuilderParams>({
  name: "",
  floors: null,
  area: null,
  propertyFeePrice: null,
});
const newParamsRules = ref<FormRules<newBuilderParams>>({
  name: [{ required: true, message: "请输入楼宇名称", trigger: "blur" }],
  floors: [{ required: true, message: "请输入楼宇层数", trigger: "blur" }],
  area: [{ required: true, message: "请输入在管面积", trigger: "blur" }],
  propertyFeePrice: [
    { required: true, message: "请输入物业费", trigger: "blur" },
  ],
});
const newParamsRef = ref<FormInstance>();
const id=ref()
const addBuild = async () => {
  await newParamsRef.value?.validate();
  if(id.value){
    const res = await editBuilding({
      ...newParams.value,
      id:id.value
    });
    if (res.code === 10000) {
    ElMessage.success("编辑成功");
    newParamsRef.value?.resetFields();
    getList();
    id.value=undefined
    dialogVisible.value = false;
  } else {
    ElMessage.error("编辑失败");
  }
  }else{
    const res = await addBuilding(newParams.value);
  if (res.code === 10000) {
    ElMessage.success("添加成功");
    newParamsRef.value?.resetFields();
    getList();
    dialogVisible.value = false;
  } else {
    ElMessage.error("添加失败");
  }
  }
};
// 点击编辑按钮
const EditBuild = async (ids: number) => {
  dialogVisible.value = true;
  const res = await getBuildingDetail(ids);
  newParams.value.area = res.data.area;
  newParams.value.floors = res.data.floors;
  newParams.value.name = res.data.name;
  newParams.value.propertyFeePrice = res.data.propertyFeePrice;
  id.value=ids
};
// 删除
const DelRentQ = async (id: number) => {
  const res = await delBuilding(id);
  if (res.code === 10000) {
    ElMessage.success("删除成功");
    getList();
  } else {
    ElMessage.error("删除失败");
  }
};
</script>
<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">楼宇名称：</div>
      <el-input clearable placeholder="请输入内容" v-model="Params.name" />
      <el-button type="primary" @click="getList">查询</el-button>
    </div>
    <div class="create-container">
      <el-button type="primary" @click="dialogVisible = true"
        >添加楼宇</el-button
      >
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="BuilderList">
        <el-table-column type="index" label="序号" width="120" />
        <el-table-column label="楼宇名称" width="320" prop="name" />
        <el-table-column label="层数" prop="floors" />
        <el-table-column label="在管面积" prop="area" />
        <el-table-column label="物业费" prop="propertyFeePrice" />
        <el-table-column label="租赁状态" prop="status">
          <template #default="{ row }">
            {{ row.status === 0 ? "空置中" : "租赁中" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320">
          <template #default="{ row }">
            <el-button size="small" type="text" @click="EditBuild(row.id)"
              >编辑</el-button
            >
            <el-button :disabled="row.status === 1" @click="DelRentQ(row.id)" size="small" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <el-pagination
        v-model:current-page="Params.page"
        v-model:page-size="Params.pageSize"
        :page-sizes="[1, 2, 3, 4]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @change="getList"
      />
    </div>
    <div class="form-container">
      <el-dialog v-model="dialogVisible" title="Tips" width="580">
        <div class="form-main">
          <el-form
            :model="newParams"
            label-position="top"
            :rules="newParamsRules"
            ref="newParamsRef"
          >
            <el-form-item label="楼宇名称" prop="name">
              <el-input v-model="newParams.name" />
            </el-form-item>
            <el-form-item label="楼宇层数" prop="floors">
              <el-input v-model="newParams.floors" />
            </el-form-item>
            <el-form-item label="在管面积" prop="area">
              <el-input v-model="newParams.area"></el-input>
            </el-form-item>
            <el-form-item label="物业费" prop="propertyFeePrice">
              <el-input v-model="newParams.propertyFeePrice"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addBuild"> 确定 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.building-container {
  padding: 20px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
.form-main {
  padding: 20px 70px;
}
</style>
